import React, {Component} from 'react';
import './MotorSwitch.less';
import {func, string} from 'prop-types';

const STATE_POINT_CLASS_TABLE = {
    forward: 'state-point-forward',
    backward: 'state-point-backward',
    off: 'state-point-off',
};

const BTN_DOT_CLASS_TABLE = {
    forward: 'btn-dot-forward',
    backward: 'btn-dot-backward',
    off: 'btn-dot-off',
};
const STATE_FORWARD = 'forward';
const STATE_BACKWARD = 'backward';
const STATE_OFF = 'off';

// 致你

class MotorSwitch extends Component {
    static propTypes = {
        state: string.isRequired,
        onChange: func.isRequired,
    };
    changeState = state => {
        const {onChange} = this.props;
        return onChange && onChange(state);
    };

    render() {
        const stateName = this.props.state;
        const btnDotClass = 'btn-dot ' + BTN_DOT_CLASS_TABLE[stateName];
        const statePointClass = 'state-point ' + STATE_POINT_CLASS_TABLE[stateName];
        return (
            <div className="motor-switch">
                <div className="switch">
                    <div className="bar">
                        <div className="state-text" onClick={() => this.changeState(STATE_BACKWARD)}>反转</div>
                        <div className="state-text" onClick={() => this.changeState(STATE_OFF)}>停止</div>
                        <div className="state-text" onClick={() => this.changeState(STATE_FORWARD)}>正转</div>
                    </div>
                    <div className={btnDotClass}>
                        <div className="ring-1">
                            <div className="ring-2"/>
                        </div>
                    </div>
                </div>
                <div className={statePointClass}/>
            </div>
        );
    }
}

export default MotorSwitch;